<template>
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  name: 'Demo',
  /* beforeCreate() {
    console.log("---beforeCreate---")
  },
  created() {
    console.log("---created---")
  },
  beforeMount() {
    console.log("---beforeMount---")
  },
  mounted() {
    console.log("---mounted---")
  },
  beforeUpdate() {
    console.log("---beforeUpdate---")
  },
  updated() {
    console.log("---updated---")
  },
  beforeUnmount() {
    console.log("---beforeUnmount---")
  },
  unmounted() {
    console.log("---unmounted---")
  }, */
  setup() {
    let sum = ref(10)

    // 组合API方式
    onBeforeMount(() => {
      console.log("---onBeforeMount---")
    })

    onMounted(() => {
      console.log("---onMounted---")
    })

    onBeforeUpdate(() => {
      console.log("---onBeforeUpdate---")
    })

    onUpdated(() => {
      console.log("---onUpdated---")
    })

    onBeforeUnmount(() => {
      console.log("---onBeforeUnmount---")
    })

    onUnmounted(() => {
      console.log("---onUnmounted---")
    })

    // 返回一个对象，暴露给模板使用（常用）
    return {
      sum
    }
  }
}
</script>

<style>

</style>
